 /*
 * @description: 售后维权/查看详情
 * @Author: ice
 * @Date: 2021-04-10
 * @Last Modified by: --
 * @Last Modified time: --
 */
<template>
    <div
        class="goodAfterDetail"
        v-loading="loading"
    >
        <div class="detail">
            <p class="detail-title">
                售后维权详情
            </p>

            <!-- 信息状态 -->
            <div class="view">
                <!-- 仅退款流程 -->
                <div
                    v-if="formData.type == 1"
                    :style="{width: !ISKF ? '120%' : '100%', marginLeft: !ISKF ? '-10%' : ''}"
                >
                    <el-steps
                        :active="STEP"
                        :align-center="true"
                        process-status="wait"
                    >
                        <!-- 无客服介入 -->
                        <template v-if="!ISKF">
                            <!-- 订单取消申请状态,0:未申请,1:申请中,11:退货申请审核通过,12:退货已发货,2:申请通过,-1:申请不通过,-2:撤销申请 -->
                            <el-step
                                title="买家提交申请"
                                :description="order_create_time"
                                icon="icon-yuan-copy-copy-copy-copy iconfont"
                            />
                            <el-step
                                title="商家处理售后申请"
                                :description="order_handle_time"
                                icon="icon-yuan-copy-copy-copy-copy iconfont"
                            />
                            <!-- 通过处理方式, 0:未处理, 1:用户处理, 2:商家处理, 3:管理员处理, 4:系统超时处理 -->
                            <el-step
                                v-if="formData.status == 2"
                                :title="formData.deal_success_type !== 4 ? '退款完成' : '退款完成(超时未处理)'"
                                :description="deal_success_time"
                                icon="icon-yuan-copy-copy-copy-copy iconfont"
                            />
                            <el-step
                                v-else-if="formData.status == -2"
                                title="用户取消售后"
                                :description="deal_cancel_time"
                                icon="icon-yuan-copy-copy-copy-copy iconfont"
                            />
                            <el-step
                                v-else-if="formData.status == -1"
                                title="商家拒绝退款"
                                :description="deal_refuse_time"
                                icon="icon-yuan-copy-copy-copy-copy iconfont"
                            />
                            <el-step
                                v-else
                                title="退款完成"
                                description=""
                                icon="icon-yuan-copy-copy-copy-copy iconfont"
                            />
                        </template>
                        <!-- 客服介入流程 -->
                        <template v-if="ISKF">
                            <el-step
                                title="客服介入"
                                :description="order_kf_time"
                                icon="icon-yuan-copy-copy-copy-copy iconfont"
                            />
                            <el-step
                                title="投诉成功"
                                :description="order_kf_time"
                                icon="icon-yuan-copy-copy-copy-copy iconfont"
                            />
                            <el-step
                                title="商家处理售后申请"
                                :description="order_handle_time"
                                icon="icon-yuan-copy-copy-copy-copy iconfont"
                            />
                            <!-- 通过处理方式, 0:未处理, 1:用户处理, 2:商家处理, 3:管理员处理, 4:系统超时处理 -->
                            <el-step
                                v-if="formData.status == 2"
                                :title="formData.deal_success_type !== 4 ? '退款完成' : '退款完成(超时未处理)'"
                                :description="deal_success_time"
                                icon="icon-yuan-copy-copy-copy-copy iconfont"
                            />
                            <el-step
                                v-else-if="formData.status == -2"
                                title="用户取消售后"
                                :description="deal_cancel_time"
                                icon="icon-yuan-copy-copy-copy-copy iconfont"
                            />
                            <el-step
                                v-else-if="formData.status == -1"
                                title="商家拒绝退款"
                                :description="deal_refuse_time"
                                icon="icon-yuan-copy-copy-copy-copy iconfont"
                            />
                            <el-step
                                v-else
                                title="退款完成"
                                description=""
                                icon="icon-yuan-copy-copy-copy-copy iconfont"
                            />
                        </template>
                    </el-steps>
                </div>

                <!-- 退货退款 -->
                <div
                    v-if="formData.type == 2"
                    :style="{width: '110%', marginLeft: '-5%'}"
                >
                    <!-- 无客服介入流程 -->
                    <template v-if="!ISKF">
                        <el-steps
                            :active="NEXT"
                            :align-center="true"
                            process-status="wait"
                        >
                            <el-step
                                title="买家提交申请"
                                :description="order_create_date"
                                icon="icon-yuan-copy-copy-copy-copy iconfont"
                            />
                            <el-step
                                title="商家处理售后申请"
                                :description="order_handle_date"
                                icon="icon-yuan-copy-copy-copy-copy iconfont"
                            />
                            <!-- 发起即被拒绝流程(用户发货时间为空 && 拒绝状态)) -->
                            <template v-if="formData.status == -1 && !order_shop_date">
                                <el-step
                                    title="商家拒绝退款"
                                    :description="order_refuse_date"
                                    icon="icon-yuan-copy-copy-copy-copy iconfont"
                                />
                            </template>
                            <!-- 发起即取消流程 -->
                            <template v-else-if="formData.status == -2 && !order_shop_date">
                                <el-step
                                    title="用户取消售后"
                                    :description="deal_cancel_date"
                                    icon="icon-yuan-copy-copy-copy-copy iconfont"
                                />
                            </template>
                            <!-- 用户发货后流程 -->
                            <template v-else>
                                <el-step
                                    title="买家退回商品"
                                    :description="order_shop_date"
                                    icon="icon-yuan-copy-copy-copy-copy iconfont"
                                />
                                <!-- 通过处理方式, 0:未处理, 1:用户处理, 2:商家处理, 3:管理员处理, 4:系统超时处理 -->
                                <el-step
                                    v-if="formData.status == 2"
                                    :title=" formData.deal_success_type !== 4 ? '退货退款完成' : '退货退款完成(超时未处理)'"
                                    :description="deal_success_date"
                                    icon="icon-yuan-copy-copy-copy-copy iconfont"
                                />
                                <!-- 取消处理方式, 0:未处理, 1:用户处理, 2:商家处理, 3:管理员处理, 4:系统超时处理 -->
                                <el-step
                                    v-else-if="formData.status == -2"
                                    :title="formData.deal_cancel_type !== 4 ? '用户取消售后' : '自动取消售后(买家超时未退货)'"
                                    :description="deal_cancel_date"
                                    icon="icon-yuan-copy-copy-copy-copy iconfont"
                                />
                                <el-step
                                    v-else-if="formData.status == -1"
                                    title="商家拒绝售后"
                                    :description="order_refuse_date"
                                    icon="icon-yuan-copy-copy-copy-copy iconfont"
                                />
                                <el-step
                                    v-else
                                    title="退货退款完成"
                                    description=""
                                    icon="icon-yuan-copy-copy-copy-copy iconfont"
                                />
                            </template>
                        </el-steps>
                    </template>
                    <!-- 客服介入流程 -->
                    <template v-if="ISKF">
                        <el-steps
                            :active="NEXT"
                            :align-center="true"
                            process-status="wait"
                        >
                            <el-step
                                title="客服介入"
                                :description="order_kf_data"
                                icon="icon-yuan-copy-copy-copy-copy iconfont"
                            />
                            <el-step
                                title="投诉成功"
                                :description="order_kf_data"
                                icon="icon-yuan-copy-copy-copy-copy iconfont"
                            />
                            <el-step
                                title="买家退回商品"
                                :description="order_shop_date"
                                icon="icon-yuan-copy-copy-copy-copy iconfont"
                            />
                            <el-step
                                v-if="formData.status == 2"
                                :title=" formData.deal_success_type !== 4 ? '退货退款完成' : '退货退款完成(超时未处理)'"
                                :description="deal_success_date"
                                icon="icon-yuan-copy-copy-copy-copy iconfont"
                            />
                            <el-step
                                v-else-if="formData.status == -2"
                                :title="formData.deal_cancel_type !== 4 ? '用户取消售后' : '自动取消售后(买家超时未退货)'"
                                :description="deal_cancel_date"
                                icon="icon-yuan-copy-copy-copy-copy iconfont"
                            />
                            <el-step
                                v-else-if="formData.status == -1"
                                title="商家拒绝售后"
                                :description="order_refuse_date"
                                icon="icon-yuan-copy-copy-copy-copy iconfont"
                            />
                            <el-step
                                v-else
                                title="退货退款完成"
                                description=""
                                icon="icon-yuan-copy-copy-copy-copy iconfont"
                            />
                        </el-steps>
                    </template>
                </div>

                <!-- 换货 -->
                <div
                    v-if="formData.type == 3"
                    :style="{width: '100%', marginLeft: '0%'}"
                >
                    <template>
                        <el-steps
                            :active="LENGTH"
                            :align-center="true"
                            process-status="wait"
                        >
                            <el-step
                                title="买家提交申请"
                                :description="order_create_goods"
                                icon="icon-yuan-copy-copy-copy-copy iconfont"
                            />
                            <el-step
                                title="商家处理售后申请"
                                :description="order_handle_goods"
                                icon="icon-yuan-copy-copy-copy-copy iconfont"
                            />
                            <!-- 用户发起即被拒绝流程(用户退货时间为空 && 拒绝状态)) -->
                            <template v-if="formData.status == -1 && !order_shop_goods">
                                <el-step
                                    title="商家拒绝换货"
                                    :description="order_refuse_goods"
                                    icon="icon-yuan-copy-copy-copy-copy iconfont"
                                />
                            </template>
                            <!-- 用户发起即取消流程 -->
                            <template v-else-if="formData.status == -2 && !order_shop_goods">
                                <el-step
                                    title="用户取消换货"
                                    :description="deal_cancel_goods"
                                    icon="icon-yuan-copy-copy-copy-copy iconfont"
                                />
                            </template>
                            <!-- 用户发起即同意退款，无需换货 -->
                            <template v-else-if="formData.status == 2 && !order_shop_goods">
                                <el-step
                                    title="换货完成(无需退货)"
                                    :description="deal_cancel_goods"
                                    icon="icon-yuan-copy-copy-copy-copy iconfont"
                                />
                            </template>
                            <!-- 用户退货后流程 -->
                            <template v-else>
                                <!-- 是否需要买家退货 -->
                                <el-step
                                    title="买家退回商品"
                                    :description="order_shop_goods"
                                    icon="icon-yuan-copy-copy-copy-copy iconfont"
                                />
                                <!-- 买家退回，商家直接拒绝，不用展示 -->
                                <el-step
                                    v-if="!(formData.status == -1 && !order_mail_goods)"
                                    :title="formData.deal_return_process_type !== 4 ? '商家寄出商品' : '商家寄出商品(超时未处理)'"
                                    :description="order_mail_goods"
                                    icon="icon-yuan-copy-copy-copy-copy iconfont"
                                />
                                <!-- 通过处理方式, 0:未处理, 1:用户处理, 2:商家处理, 3:管理员处理, 4:系统超时处理 -->
                                <el-step
                                    v-if="formData.status == 2"
                                    :title="formData.deal_return_sign_type !== 4 ? '换货完成' : '换货完成(超时未处理)'"
                                    :description="deal_success_goods"
                                    icon="icon-yuan-copy-copy-copy-copy iconfont"
                                />
                                <!-- 取消处理方式, 0:未处理, 1:用户处理, 2:商家处理, 3:管理员处理, 4:系统超时处理 -->
                                <el-step
                                    v-else-if="formData.status == -2"
                                    :title="formData.deal_cancel_type !== 4 ? '用户取消售后' : '自动取消售后(买家超时未退货)'"
                                    :description="deal_cancel_goods"
                                    icon="icon-yuan-copy-copy-copy-copy iconfont"
                                />
                                <el-step
                                    v-else-if="formData.status == -1"
                                    title="商家拒绝售后"
                                    :description="order_refuse_goods"
                                    icon="icon-yuan-copy-copy-copy-copy iconfont"
                                />
                                <!-- 特殊异常处理 -->
                                <el-step
                                    v-else
                                    title="换货完成"
                                    description=""
                                    icon="icon-yuan-copy-copy-copy-copy iconfont"
                                />
                            </template>
                        </el-steps>
                    </template>
                </div>
            </div>

            <!-- 信息展示 -->
            <div class="detail-wrap">
                <div class="wrap-title">
                    {{ formData.type == 3 ? '换货申请状态:' : '退款申请状态:' }}
                    <p
                        class="wrap-title-type"
                        :class="formData.status == 2 || formData.status == 11 ? 'refundSuccess' : ''"
                    >
                        {{ formData.status | filterRefund }}
                    </p>
                </div>
                <p class="detail-info">
                    商品信息
                </p>

                <!-- 商品信息 -->
                <after-detail-list
                    :table="[formData]"
                    ref="afterDetailList"
                />

                <!-- 退款信息 -->
                <template v-if="formData.type == 1 || formData.type == 2">
                    <p class="rufund-info">
                        退款信息
                    </p>
                    <div class="refundSide">
                        <div class="item">
                            <p class="item-title">
                                订单编号
                            </p>
                            <p class="item-content">
                                {{ formData.order_no ? formData.order_no: '--' }}
                            </p>
                        </div>
                        <div class="item">
                            <p class="item-title">
                                订单状态
                            </p>
                            <p class="item-content">
                                {{ formData.order_status | filterStatus }}
                            </p>
                        </div>
                        <div class="item">
                            <p class="item-title">
                                申请时间
                            </p>
                            <p class="item-content">
                                {{ formData.create_time * 1000 | dateFormat('yyyy/MM/dd HH:mm') }}
                            </p>
                        </div>
                        <div class="item">
                            <p class="item-title">
                                用户昵称
                            </p>
                            <p class="item-content">
                                {{ formData.student_true_name ? formData.student_true_name : '--' }}
                            </p>
                        </div>
                        <div class="item">
                            <p class="item-title">
                                退款类型
                            </p>
                            <p class="item-content">
                                {{ formData.type == 1 ? '仅退款' : '退货退款' }}
                            </p>
                        </div>
                        <div class="item">
                            <p class="item-title">
                                订单金额
                            </p>
                            <p class="item-content">
                                {{ formData.money ? formData.money : '--' }}
                            </p>
                        </div>
                        <div class="item">
                            <p class="item-title">
                                退款金额
                            </p>
                            <p class="item-content">
                                {{ formData.refund_money ? formData.refund_money : '--' }}
                            </p>
                        </div>
                        <div class="item">
                            <p class="item-title">
                                学生备注
                            </p>
                            <p class="item-content">
                                {{ formData.remark ? formData.remark : '--' }}
                            </p>
                        </div>
                        <div class="item">
                            <p class="item-title">
                                补充说明
                            </p>
                            <p class="item-content">
                                {{ formData.reason ? formData.reason : '--' }}
                            </p>
                        </div>
                        <div
                            class="item"
                            :style="{marginBottom: '24px'}"
                        >
                            <p class="item-title">
                                图片凭证
                            </p>
                            <div
                                v-if="formData.evidence_list.length > 0"
                                class="item-images"
                            >
                                <img
                                    v-for="(el,i) in formData.evidence_list"
                                    :key="i"
                                    :src="el"
                                    @click="fnPrievimage(formData.evidence_list, i)"
                                >
                            </div>
                            <div v-else>
                                --
                            </div>
                        </div>
                        <!-- 退货退款和待商家收货 -->
                        <div
                            class="item-foot"
                            v-if="formData.type === 2 && (formData.status === 2 || formData.status === 12)"
                        >
                            <div class="item-detail">
                                买家已寄出, {{ formData.reject_tracking_info.logistics_name ? '物流公司名称' + formData.reject_tracking_info.logistics_name : '' }}  (物流单号: {{ formData.reject_tracking_info.tracking_no ? formData.reject_tracking_info.tracking_no : '--' }})
                                <p
                                    class="item-check"
                                    @click="checkLogistics(2)"
                                >
                                    查看物流
                                </p>
                            </div>
                        </div>
                    </div>
                </template>

                <!-- 换货信息 -->
                <template v-if="formData.type == 3">
                    <p class="rufund-info">
                        换货信息
                    </p>
                    <div class="__goods">
                        <div class="__item">
                            <p class="__item_title">
                                订单编号:
                                <span class="__item_content">
                                    {{ formData.order_no ? formData.order_no : '-' }}
                                </span>
                            </p>
                            <p class="__item_title">
                                申请时间:
                                <span class="__item_content">
                                    {{ formData.create_time * 1000 | dateFormat('yyyy/MM/dd HH:mm') }}
                                </span>
                            </p>
                            <p class="__item_title">
                                下单时间:
                                <span class="__item_content">
                                    {{ formData.order_create_time * 1000 | dateFormat('yyyy/MM/dd HH:mm') }}
                                </span>
                            </p>
                            <p class="__item_title">
                                售后类型:
                                <span class="__item_content">
                                    换货
                                </span>
                            </p>
                            <p class="__item_title">
                                是否收到货:
                                <span class="__item_content">
                                    {{ formData.order_status | filterStatus }}
                                </span>
                            </p>
                            <p class="__item_title">
                                换货理由:
                                <span class="__item_content">
                                    {{ formData.reason ? formData.reason : '--' }}
                                </span>
                            </p>
                            <p class="__item_title">
                                换货商品:
                                <span class="__item_content">
                                    {{ formData.order_item_list[0]['goods_product_info']['goods_specs'] | filterSpec }}
                                </span>
                            </p>
                            <p class="__item_title">
                                换货数量:
                                <span class="__item_content">
                                    {{ formData.cancel_apply_num ? formData.cancel_apply_num : '--' }}
                                </span>
                            </p>
                        </div>
                        <div :style="{width: '100%', height: '1px', background: 'rgba(238, 238, 238, 1)', marginBottom: '24px' }" />
                        <div class="__item">
                            <div
                                class="__item_title"
                                :style="{width: 'calc(100% / 2.1)'}"
                            >
                                买家退回物流单号:
                                <div class="__item_content">
                                    <div
                                        class="item-detail"
                                        v-if="(formData.status === 3 || formData.status === 12 || formData.status === 13 || formData.status === 14 || formData.status === 15 || formData.status === 2) && !!formData.reject_tracking_info"
                                    >
                                        {{ formData.reject_tracking_info.logistics_name ? formData.reject_tracking_info.logistics_name : '' }}  (物流单号: {{ formData.reject_tracking_info.tracking_no ? formData.reject_tracking_info.tracking_no : '--' }})
                                        <p
                                            class="item-check"
                                            @click="checkLogistics(2)"
                                        >
                                            查看物流
                                        </p>
                                    </div>
                                    <div v-else>
                                        --
                                    </div>
                                </div>
                            </div>
                            <div
                                class="__item_title"
                                :style="{width: 'calc(100% / 2.1)', marginRight: '20px'}"
                            >
                                商家换货物流单号:
                                <div class="__item_content">
                                    <div
                                        class="item-detail"
                                        v-if="(formData.status === 14 || formData.status === 15 || formData.status == 2 || formData.status == 3) && !!formData.return_tracking_info"
                                    >
                                        {{ formData.return_tracking_info.logistics_name ? formData.return_tracking_info.logistics_name : '' }}  (物流单号: {{ formData.return_tracking_info.tracking_no ? formData.return_tracking_info.tracking_no : '--' }})
                                        <p
                                            class="item-check"
                                            @click="checkLogistics(1)"
                                        >
                                            查看物流
                                        </p>
                                    </div>
                                    <div v-else>
                                        --
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <p class="rufund-info">
                        用户信息
                    </p>
                    <div class="__goods">
                        <div class="__item">
                            <p class="__item_title">
                                用户昵称:
                                <span class="__item_content">
                                    {{ formData.student_true_name ? formData.student_true_name : '-' }}
                                </span>
                            </p>
                            <p class="__item_title">
                                收件人:
                                <span class="__item_content">
                                    {{ formData.return_address_info.user_name ? formData.return_address_info.user_name : '--' }}
                                </span>
                            </p>
                            <p class="__item_title">
                                收件人手机号:
                                <span class="__item_content">
                                    {{ formData.return_address_info.phone ? formData.return_address_info.phone : '--' }}
                                </span>
                            </p>
                            <!-- <p class="__item_title">
                                邮政编码:
                                <span class="__item_content">
                                    {{ formData.student_true_name ? formData.student_true_name : '-' }}
                                </span>
                            </p> -->
                            <p class="__item_title">
                                收货地址:
                                <span class="__item_content">
                                    {{ formData.return_address_info.province_name + formData.return_address_info.city_name + formData.return_address_info.county_name + formData.return_address_info.detail_info }}
                                </span>
                            </p>
                        </div>
                    </div>
                    <p class="rufund-info">
                        换货说明和凭证
                    </p>
                    <div class="__goods">
                        <div class="__goods_item">
                            <p class="__goods_item_title">
                                补充说明
                            </p>
                            <p class="__goods_item_remark">
                                {{ formData.remark ? formData.remark : '--' }}
                            </p>
                        </div>
                        <div
                            class="__goods_item"
                            v-if="!!formData.evidence_list"
                        >
                            <p class="__goods_item_title">
                                图片凭证
                            </p>
                            <div
                                v-if="formData.evidence_list.length > 0"
                                class="item-images"
                            >
                                <img
                                    v-for="(el,i) in formData.evidence_list"
                                    :key="i"
                                    :src="el"
                                    @click="fnPrievimage(formData.evidence_list, i)"
                                >
                            </div>
                            <div v-else>
                                --
                            </div>
                        </div>
                    </div>
                </template>

                <!-- 操作 -->
                <div class="dialog-foot">
                    <el-button
                        size="medium"
                        type="default"
                        :style="{width: '120px', marginRight: '32px'}"
                        @click="() => {
                            this.$router.push({
                                name: 'goodAfterProtection'
                            })
                        }"
                    >
                        返 回
                    </el-button>
                    <template v-if="formData.type == 1 || formData.type == 2">
                        <el-button
                            v-if="formData.status === 1 || formData.status === 11 || formData.status === 12"
                            size="medium"
                            type="default"
                            :style="{width: '120px',marginRight: '36px'}"
                            @click="showRefuse()"
                        >
                            拒绝退款
                        </el-button>
                        <el-button
                            v-if="formData.status === 1 || formData.status === 11 || formData.status === 12"
                            size="medium"
                            type="primary"
                            :style="{width: '120px',marginRight: '36px'}"
                            @click="showAgree()"
                        >
                            {{ formData.status === 12 ? '确认收货' : '同意退款' }}
                        </el-button>
                    </template>
                    <template v-if="formData.type == 3">
                        <el-button
                            v-if="formData.status === 1"
                            size="medium"
                            type="default"
                            :style="{width: '120px',marginRight: '36px'}"
                            @click="$refs.refuseExchange.show(formData)"
                        >
                            拒绝换货
                        </el-button>
                        <el-button
                            v-if="formData.status === 1"
                            size="medium"
                            type="default"
                            :style="{width: '120px',marginRight: '36px'}"
                            @click="$refs.agreeExchange.show(formData)"
                        >
                            同意换货
                        </el-button>
                        <el-button
                            v-if="formData.status === 12"
                            size="medium"
                            type="default"
                            :style="{width: '120px',marginRight: '36px'}"
                            @click="$refs.refuseReceive.show(formData)"
                        >
                            拒绝收货
                        </el-button>
                        <el-button
                            v-if="formData.status === 12"
                            size="medium"
                            type="default"
                            :style="{width: '120px',marginRight: '36px'}"
                            @click="showAgree()"
                        >
                            确认收货
                        </el-button>
                        <el-button
                            v-if="formData.status === 14"
                            size="medium"
                            type="default"
                            :style="{width: '120px',marginRight: '36px'}"
                            @click="$refs.exchangeChangeLogistics.show(formData)"
                        >
                            修改物流单号
                        </el-button>
                        <el-button
                            v-if="formData.status === 13"
                            size="medium"
                            type="default"
                            :style="{width: '120px',marginRight: '36px'}"
                            @click="$refs.exchangeDelivery.show(formData)"
                        >
                            发货
                        </el-button>
                    </template>
                </div>
            </div>
        </div>

        <!-- 拒绝退款弹窗 -->
        <el-dialog
            title="拒绝退款"
            :visible.sync="dialogVisibleRefund"
            width="640px"
            :close-on-click-modal="false"
        >
            <el-input
                v-model="refund_reson"
                type="textarea"
                :autosize="{ minRows: 3, maxRows: 6}"
                placeholder="请输入拒绝退款理由"
                maxlength="20"
                show-word-limit
            />
            <span
                slot="footer"
                class="dialog-footer"
            >
                <el-button
                    @click="dialogVisibleRefund = false"
                    size="medium"
                    :style="{width: '120px', marginRight: '32px'}"
                >
                    取 消
                </el-button>
                <el-button
                    type="primary"
                    size="medium"
                    :style="{width: '120px'}"
                    :disabled="!refund_reson"
                    @click="confirmRefused()"
                >确 定</el-button>
            </span>
        </el-dialog>

        <!-- 同意退款弹窗 -->
        <el-dialog
            title="同意退款"
            :visible.sync="dialogVisibleAgree"
            width="640px"
            :close-on-click-modal="false"
        >
            <div class="dialog-wrap center">
                <p class="dialog-wrap-title">
                    处理方式
                </p>
                <p class="dialog-wrap-type">
                    退货退款
                </p>
            </div>
            <div class="dialog-wrap center">
                <p
                    class="dialog-wrap-title"
                    :style="{marginRight: '19px'}"
                >
                    处理结果
                </p>
                <el-radio
                    v-model="type"
                    label="1"
                >
                    同意退款(无需用户发货直接退款)
                </el-radio>
                <el-radio
                    v-model="type"
                    label="2"
                >
                    通过申请(需要买家寄回商品)
                </el-radio>
            </div>
            <div
                class="dialog-wrap center"
                v-if="type == '2'"
            >
                <p class="dialog-wrap-title">
                    退货地址
                </p>
                <el-select
                    v-model="address"
                    clearable
                    filterable
                    placeholder="请选择退货地址"
                    size="small"
                    :style="{width: '368px'}"
                >
                    <el-option
                        v-for="item in addressList"
                        :key="item.address_no"
                        :label="item.address_title"
                        :value="item.address_no"
                    />
                </el-select>
                <p
                    :style="{color: '#20A0FF', cursor: 'pointer', fontSize: '14px', fontWeight: '500', marginLeft: '12px', whiteSpace: 'nowrap'}"
                    @click="() => {
                        this.$router.push({
                            name: 'goodAfterEdit'
                        })
                    }"
                >
                    新增地址
                </p>
            </div>
            <div
                class="dialog-wrap"
                v-if="type == '2'"
            >
                <p class="dialog-wrap-title">
                    退货备注
                </p>
                <el-input
                    v-model="remark"
                    type="textarea"
                    :autosize="{ minRows: 3, maxRows: 6}"
                    placeholder="请输入退货备注"
                    maxlength="20"
                    show-word-limit
                    :style="{width: '444px'}"
                />
            </div>
            <span
                slot="footer"
                class="dialog-footer"
            >
                <el-button
                    @click="dialogVisibleAgree = false"
                    size="medium"
                    :style="{width: '120px', marginRight: '32px'}"
                >
                    取 消
                </el-button>
                <el-button
                    type="primary"
                    size="medium"
                    :style="{width: '120px'}"
                    :disabled="type == '1' ? false : (!address || !remark)"
                    @click="confirmAgree()"
                >确 定</el-button>
            </span>
        </el-dialog>

        <!-- 查看物流信息 -->
        <logistice-list
            ref="logistice"
        />

        <!-- 图片预览 -->
        <img-preview ref="preview" />

        <!-- 同意换货弹窗-->
        <agree-exchange
            ref="agreeExchange"
            @update="updateGetList"
        />
        <!-- 拒绝换货弹窗-->
        <refuse-exchange
            ref="refuseExchange"
            @update="updateGetList"
        />
        <!-- 拒绝收货弹窗-->
        <refuse-receive
            ref="refuseReceive"
            @update="updateGetList"
        />
        <!-- 发货弹窗-->
        <exchange-delivery
            ref="exchangeDelivery"
            @update="updateGetList"
        />
        <!-- 更改物流弹窗-->
        <exchange-change-logistics
            ref="exchangeChangeLogistics"
            @update="updateGetList"
        />
    </div>
</template>

<script>
import logisticeList from '@/components/manage/market/logistice-list';
import afterDetailList from '@/components/manage/market/after-detail-list';
import imgPreview from '@/components/common/img-preview';
import agreeExchange from '@/components/manage/market/agree-exchange';
import refuseReceive from '@/components/manage/market/refuse-receive';
import exchangeDelivery from '@/components/manage/market/exchange-delivery';
import exchangeChangeLogistics from '@/components/manage/market/exchange-change-logistics';
import refuseExchange from '@/components/manage/market/refuse-exchange';

//拒绝退款
const Refund = {
    dialogVisibleRefund: false,
    refund_reson: ''
};

//同意退款
const Agree = {
    dialogVisibleAgree: false,
    addressList: [],
    address: '',
    remark: '',
    type: '2'
};

//仅退款流程
const STATUS = {
    STEP: 1,
    order_create_time: '',//买家提交申请
    order_handle_time: '',//商家处理申请
    deal_success_time: '',//退款完成时间
    deal_cancel_time: '',//用户取消售后
    deal_refuse_time: '',//商家拒绝退款
    order_kf_time: '',//客服介入
};

//退货退款流程(需查询是否需要买家退货)
const DATA = {
    NEXT: 1,
    order_create_date: '',//买家提交申请
    order_handle_date: '',//商家处理售后申请
    order_shop_date: '',//用户退回商品时间
    deal_success_date: '',//退货退款完成[商家同意退款]
    deal_cancel_date: '',//用户取消售后[用户寄回商品前、寄回商品后、用户超时未发货将自动取消, 申请就取消]
    order_refuse_date: '',//商家拒绝退款[发起被拒绝、用户寄回商品后拒绝]
    order_kf_data: '',//客服介入时间
};

//换货
const HY = {
    LENGTH: 1,
    order_create_goods: '',//买家提交换货申请
    order_handle_goods: '',//商家处理换货申请
    order_shop_goods: '',//买家退回商品时间
    order_mail_goods: '',//商家寄出商品时间
    deal_success_goods: '',//换货完成[用户确认收货，商家超时未发货]
    deal_cancel_goods: '',//用户取消换货[用户退回商品前、用户超时未退货将自动取消, 申请就取消]
    order_refuse_goods: '',//商家拒绝换货[发起就拒绝，用户退回商品后拒绝]
    order_kf_goods: '',//客服介入时间
};

export default {
    components: {
        logisticeList,
        afterDetailList,
        imgPreview,
        agreeExchange,
        refuseReceive,
        exchangeDelivery,
        exchangeChangeLogistics,
        refuseExchange
    },
    data () {
        return {
            ISKF: false,//是否有客服介入
            ...HY,//换货
            ...DATA,//退货退款
            ...STATUS,//仅退款
            loading: false,
            ...Refund,//拒绝退款
            ...Agree,//同意退款
            apply_no: '',//商品唯一退款编号
            formData: {
                evidence_list: []
            }
        };
    },
    watch: {
        dialogVisibleRefund (val) {
            if(!val) {
                this.refund_reson = '';
            }
        },
        dialogVisibleAgree (val) {
            if(!val) {
                this.address ='';
                this.remark = '';
                this.type = '2';
            }
        }
    },
    filters: {
        filterRefund (val) {
            if(val == 0) return '未申请';
            if(val == 1) return '退款待处理';
            if(val == 2) return '退款完成';
            if(val == 11) return '待用户发货';
            if(val == -1) return '已驳回';
            if(val == -2) return '撤销申请';
            if(val == 12) return '用户已发货';
            if(val == 13) return '等待商家发货';
            if(val == 14) return '商家已发货';
            if(val == 15) return '买家已签收';
            if(val == 3) return '换货超时退款成功';
        },
        filterSpec (val) {
            if(val.length) {
                let str = '';

                val.forEach(el => {
                    str += el.spec_name + ':' + el.spec_value + ';';
                });

                return str;
            }
        },
        filterStatus (val) {
            if(val == 0) return '待支付';
            if(val == 1) return '团购中';
            if(val == 2) return '待发货';
            if(val == 3) return '待收货';
            if(val == 4) return '已完成';
            if(val == -1) return '订单取消';
        }
    },
    mounted () {
        this.init();
    },
    methods: {
        /**
         * @description 初始化页面数据
         */
        init () {
            const initPage = query => {
                if(query.no) {
                    this.$store.commit('theme/SET_BREAD', [{title: '订单管理'},{title: '售后维权', path: '/manage/market/good-after-protection'},{title: '售后详情'}]);
                    this.getList();
                    this.getAdress();
                }
            };

            if(process.client){
                this.loading = true;
                this.apply_no = this.$route.query.no;
                initPage(this.$route.query);
            }
        },

        /**
         * @description 获取售后维权详情数据列表
         */
        getList () {
            this.$post('/ShopGoodsOrderCancelApply/get', {
                apply_no: this.apply_no
            }, resp => {
                if (resp.code == 1) {
                    this.formData = {
                        ...resp.data,
                        apply_no: this.apply_no//追加编号
                    };
                    this.handleStepView(this.formData);
                    this.loading = false;
                } else {
                    this.$notify({
                        title: '警告',
                        message: resp.msg,
                        duration: 2000,
                        type: 'warning'
                    });
                }
            });
        },

        /**
         * @description 处理状态显示数据
         */
        handleStepView (row) {
            if(!row) return false;

            /**
             * @desc 仅退款
             */
            if(row.type == 1) {
                this.ISKF = row.from_type === 1 ? true : false;//true:客服介入 false:正常售后维权

                if(!this.ISKF) {
                    if(row.status == 0) {//未申请
                        this.STEP = 0;
                    } else if (row.status == 1) {//已申请
                        this.STEP = 1;
                    } else {//退款完成、商家拒绝、超时自动退款、用户取消售后
                        this.STEP = 3;
                    }
                }

                if(this.ISKF) {
                    if(row.status == 2 || row.status == -1 || row.status == -2) { //已完成 已撤销 不通过
                        this.STEP = 4;
                    } else {
                        this.STEP = 2;
                    }
                }

                if(row.status == 0) return false;
                this.order_create_time = this.dateFormat(row.create_time * 1000, 'yyyy.MM.dd HH:mm:ss');//买家提交申请
                this.order_handle_time = this.dateFormat((row.status == 2 ? row.deal_success_time : (row.status == -2 ? '' : (row.status == -1 ? row.deal_refuse_time : ''))) * 1000, 'yyyy.MM.dd HH:mm:ss');//商家处理申请时间
                this.deal_success_time = this.dateFormat(row.deal_success_time * 1000, 'yyyy.MM.dd HH:mm:ss');//退款完成时间
                this.deal_cancel_time = this.dateFormat(row.deal_cancel_time * 1000, 'yyyy.MM.dd HH:mm:ss');//用户取消售后
                this.deal_refuse_time = this.dateFormat(row.deal_refuse_time * 1000, 'yyyy.MM.dd HH:mm:ss');//商家拒绝退款
                this.order_kf_time = this.dateFormat(row.create_time * 1000, 'yyyy.MM.dd HH:mm:ss');//客服介入时间
            }

            /**
             * @desc 退货退款
             */
            if(row.type == 2) {
                this.ISKF = row.from_type === 1 ? true : false;//true:客服介入 false:正常售后维权

                /**
                 * @desc 无客服介入
                 */
                if(!this.ISKF) {
                    if(row.status == 0) {//未申请
                        this.NEXT = 0;
                    } else if (row.status == 1) {//已申请
                        this.NEXT = 1;
                    } else if (row.status == 11) {//通过退货申请
                        this.NEXT = 2;
                    } else if (row.status == 12) {//用户已发货
                        this.NEXT = 3;
                    } else {
                        this.NEXT = 4;
                        console.log('----无客服介入当前状态----', row.status);
                    }
                }

                /**
                 * @desc 有客服介入
                 */
                if(this.ISKF) {
                    if (row.status == 12) {//用户已发货
                        this.NEXT = 3;
                    } else if (row.status == 2 || row.status == -1 || row.status == -2) {
                        this.NEXT = 4;
                    } else {
                        this.NEXT = 2;
                        console.log('----有客服介入当前状态----', row.status);
                    }
                }
                if(row.status == 0) return false;
                this.order_create_date = this.dateFormat(row.create_time * 1000, 'yyyy.MM.dd HH:mm:ss');//买家提交申请
                this.order_handle_date = this.dateFormat((row.deal_reject_pass_time ? row.deal_reject_pass_time : ((row.status == 2 && !row.deal_reject_process_time) ? row.deal_success_time : (row.status == -1 ? row.deal_refuse_time : (row.status == -2 ? '' : '')))) * 1000, 'yyyy.MM.dd HH:mm:ss');//商家处理售后申请

                this.order_shop_date = this.dateFormat((row.deal_reject_process_time ? row.deal_reject_process_time : '') * 1000, 'yyyy.MM.dd HH:mm:ss');//用户退回商品时间
                this.deal_success_date = this.dateFormat(row.deal_success_time * 1000, 'yyyy.MM.dd HH:mm:ss');//退货退款完成[商家同意退款、商家超时未处理自动退款]
                this.deal_cancel_date = this.dateFormat(row.deal_cancel_time * 1000, 'yyyy.MM.dd HH:mm:ss');//用户取消售后[用户寄回商品前、寄回商品后、用户超时未发货将取消, 发起就取消]
                this.order_refuse_date = this.dateFormat(row.deal_refuse_time * 1000, 'yyyy.MM.dd HH:mm:ss');//商家拒绝退款[发起被拒绝、用户寄回商品后拒绝]
                this.order_kf_data = this.dateFormat(row.create_time * 1000, 'yyyy.MM.dd HH:mm:ss');//客服介入时间
            }

            /**
             * @desc 换货
             */
            if(row.type == 3) {
                this.ISKF = row.from_type === 1 ? true : false;//true:客服介入 false:正常售后维权

                /**
                 * @desc 无客服介入
                 */
                if(!this.ISKF) {
                    if(row.status == 0) {//未申请
                        this.LENGTH = 0;
                    } else if (row.status == 1) {//买家已申请,商家处理中
                        this.LENGTH = 1;
                    } else if (row.status == 11) {//换货申请已通过
                        this.LENGTH = 2;
                    } else if (row.status == 12) {//退货已发货
                        this.LENGTH = 3;
                    } else if (row.status == 13 || row.status == 14) {//换货商家发货
                        this.LENGTH = 4;
                    } else {
                        this.LENGTH = 5;
                        console.log('----无客服介入当前状态----', row.status);
                    }
                }

                /**
                 * @desc 有客服介入
                 */
                if(this.ISKF) {
                    //走仅退款或者退货退款流程
                }

                if(row.status == 0) return false;
                this.order_create_goods = this.dateFormat(row.create_time * 1000, 'yyyy.MM.dd HH:mm:ss');//买家提交换货申请
                this.order_handle_goods = this.dateFormat((row.deal_reject_pass_time ? row.deal_reject_pass_time : ((row.status == 2 && !row.deal_reject_process_time) ? row.deal_success_time : (row.status == -1 ? row.deal_refuse_time : (row.status == -2 ? '' : (row.deal_return_pass_time ? row.deal_return_pass_time : ''))))) * 1000, 'yyyy.MM.dd HH:mm:ss');//商家处理换货申请
                this.order_shop_goods = this.dateFormat((row.deal_reject_process_time ? row.deal_reject_process_time : '') * 1000, 'yyyy.MM.dd HH:mm:ss');//用户退回商品时间
                this.order_mail_goods = this.dateFormat((row.deal_return_process_time ? row.deal_return_process_time : '') * 1000, 'yyyy.MM.dd HH:mm:ss');//商家寄货处理时间
                this.deal_success_goods = this.dateFormat( (row.deal_return_process_time ? row.deal_return_process_time : row.deal_success_time) * 1000, 'yyyy.MM.dd HH:mm:ss');//换货完成[用户确认收货，商家超时未发货]
                this.deal_cancel_goods = this.dateFormat(row.deal_cancel_time * 1000, 'yyyy.MM.dd HH:mm:ss');//用户取消换货[用户退回商品前、用户超时未退货将自动取消, 申请就取消]
                this.order_refuse_goods = this.dateFormat(row.deal_refuse_time * 1000, 'yyyy.MM.dd HH:mm:ss');//商家拒绝换货[发起就拒绝，用户退回商品后拒绝]
                this.order_kf_goods = this.dateFormat(row.create_time * 1000, 'yyyy.MM.dd HH:mm:ss');//客服介入时间
            }
        },

        /**
         * @description 获取退货地址列表
         */
        getAdress () {
            this.$post('/ShopRefundAddress/getList', {}, resp => {
                if (resp.code == 1) {
                    this.addressList = resp.data.list;

                    //设置默认选中地址
                    for(let key = 0; key < this.addressList.length; key ++) {
                        if(this.addressList[key].is_default == 1) {
                            this.address = this.addressList[key].address_no;
                        }
                    }
                } else {
                    this.$notify({
                        title: '警告',
                        message: resp.msg,
                        duration: 2000,
                        type: 'warning'
                    });
                }
            });
        },

        /**
         * @description 打开拒绝退款弹窗(退货退款与仅退款流程一样)
         */
        showRefuse () {
            this.dialogVisibleRefund = !this.dialogVisibleRefund;
        },

        /**
         * @description 确定拒绝
         */
        confirmRefused () {
            this.$post('/ShopGoodsOrderCancelApply/verify', {
                apply_no: this.apply_no,
                type: 2,
                refuse_reason: this.refund_reson
            }, resp => {
                if (resp.code == 1) {
                    this.getList();
                    this.dialogVisibleRefund = !this.dialogVisibleRefund;
                    this.$notify({
                        title: '提示',
                        message: '操作成功',
                        duration: 500,
                        type: 'success'
                    });
                } else {
                    this.$notify({
                        title: '警告',
                        message: resp.msg,
                        duration: 2000,
                        type: 'warning'
                    });
                }
            });
        },

        /**
         * @description 打开同意退款弹窗
         */
        showAgree () {
            // 退货退款
            if(this.formData.type == 2) {
                if(this.formData.status == 1) {
                    // this.$confirm('一旦通过，则只会发送您的寄件信息给买家，而不会直接通过退款。请您耐心等待买家退货后，再返回后台进行通过退款', '提示', {
                    //     confirmButtonText: '通过',
                    //     cancelButtonText: '取消',
                    //     type: 'warning'
                    // }).then(() => {
                    //     this.dialogVisibleAgree = !this.dialogVisibleAgree;
                    //     // this.refundverfiy().then(resp => {});
                    // });
                    this.dialogVisibleAgree = !this.dialogVisibleAgree;
                }

                if(this.formData.status == 11 || this.formData.status == 12) {
                    let alert = this.formData.status ? '是否要通过退款' : '是否确认收货';

                    this.$confirm(alert, '提示', {
                        confirmButtonText: '通过',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        this.$post('/ShopGoodsOrderCancelApply/verify', {
                            apply_no: this.apply_no,
                            type: 1
                        }, resp => {
                            if (resp.code == 1) {
                                this.getList();
                                this.$notify({
                                    title: '提示',
                                    message: '操作成功',
                                    duration: 2000,
                                    type: 'success'
                                });
                            } else {
                                this.$notify({
                                    title: '警告',
                                    message: resp.msg,
                                    duration: 2000,
                                    type: 'warning'
                                });
                            }
                        });
                    });
                }
            }

            // 仅退款
            if(this.formData.type == 1) {
                if(this.formData.status == 1 && this.formData.order_status == 3) {
                    this.$confirm('订单已发出，请先联系物流商追回该快递，再审核通过', '提示', {
                        confirmButtonText: '我知道了',
                        cancelButtonText: '已追回',
                        type: 'warning'
                    }).then(() => {}).catch(() => {
                        this.$confirm('你已召回该快递，是否通过该退款？', '提示', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'warning'
                        }).then(() => {
                            this.$post('/ShopGoodsOrderCancelApply/verify', {
                                apply_no: this.apply_no,
                                type: 1
                            }, resp => {
                                if (resp.code == 1) {
                                    this.getList();
                                    this.$notify({
                                        title: '提示',
                                        message: '操作成功',
                                        duration: 2000,
                                        type: 'success'
                                    });
                                } else {
                                    this.$notify({
                                        title: '警告',
                                        message: resp.msg,
                                        duration: 2000,
                                        type: 'warning'
                                    });
                                }
                            });
                        });
                    });
                }
                if(this.formData.status == 1 && this.formData.order_status == 2) {
                    this.$confirm('是否通过退款?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        this.$post('/ShopGoodsOrderCancelApply/verify', {
                            apply_no: this.apply_no,
                            type: 1
                        }, resp => {
                            if (resp.code == 1) {
                                this.getList();
                                this.$notify({
                                    title: '提示',
                                    message: '操作成功',
                                    duration: 2000,
                                    type: 'success'
                                });
                            } else {
                                this.$notify({
                                    title: '警告',
                                    message: resp.msg,
                                    duration: 2000,
                                    type: 'warning'
                                });
                            }
                        });
                    });
                }
            }

            //换货【确认收货】
            if(this.formData.type == 3) {
                this.$confirm('确认已经收到货物?', '提示', {
                    confirmButtonText: '确认',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$post('/ShopGoodsOrderCancelApply/verify', {
                        apply_no: this.apply_no,
                        type: 4
                    }, resp => {
                        if (resp.code == 1) {
                            this.getList();
                            this.$notify({
                                title: '提示',
                                message: '操作成功',
                                duration: 2000,
                                type: 'success'
                            });
                        } else {
                            this.$notify({
                                title: '警告',
                                message: resp.msg,
                                duration: 2000,
                                type: 'warning'
                            });
                        }
                    });
                });
            }
        },

        /**
         * @description 通过退货退款申请（废弃）
         */
        refundverfiy () {
            return new Promise((resolve,reject) => {
                this.$post('/ShopGoodsOrderCancelApply/verify', {
                    apply_no: this.apply_no,
                    type: 3
                }, resp => {
                    if (resp.code == 1) {
                        resolve();
                    } else {
                        this.$notify({
                            title: '警告',
                            message: resp.msg,
                            duration: 2000,
                            type: 'warning'
                        });
                    }
                });
            });
        },

        /**
         * @description 确定同意退款
         */
        confirmAgree () {
            let data = {};

            if(this.type == '2') {
                data = {
                    apply_no: this.apply_no,
                    type: 3,
                    reject_address_no: this.address,
                    reject_remark: this.remark
                };
            }

            if(this.type == '1') {
                data = {
                    apply_no: this.apply_no,
                    type: 1,
                    reject_address_no: '',
                    reject_remark: ''
                };
            }

            this.$post('/__student/ShopGoodsOrderCancelApply/verify', {
                ...data
            }).then(resp => {
                if (resp.code == 1) {
                    this.getList();
                    this.dialogVisibleAgree = !this.dialogVisibleAgree;
                    this.$notify({
                        title: '提示',
                        message: '操作成功',
                        duration: 500,
                        type: 'success'
                    });
                } else {
                    this.$notify({
                        title: '警告',
                        message: resp.msg,
                        duration: 2000,
                        type: 'warning'
                    });
                }
            });
        },

        /**
         * @description 待商家收货/确认退款
         */
        confirmRefund () {
            this.$confirm('确定要通过退款嘛?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$post('/ShopGoodsOrderCancelApply/verify', {
                    apply_no: this.apply_no,
                    type: 1
                }, resp => {
                    if (resp.code == 1) {
                        this.getList();
                        this.$notify({
                            title: '提示',
                            message: '操作成功',
                            duration: 2000,
                            type: 'success'
                        });
                    } else {
                        this.$notify({
                            title: '警告',
                            message: resp.msg,
                            duration: 2000,
                            type: 'warning'
                        });
                    }
                });
            });
        },

        /**
         * @description 拒绝售后
         */
        refuseSale () {
            this.dialogVisibleRefund = !this.dialogVisibleRefund;
        },

        /**
         * @description 查看退货物流信息
         */
        checkLogistics (type) {
            this.$refs.logistice.fnSeeLogInfo(this.formData.order_no, type, this.apply_no);
        },

        /**
         * @description 更新详情数据
         */
        updateGetList () {
            this.loading = true;
            this.getList();

            setTimeout(() => {
                this.loading = false;
            }, 300);
        },

        /**
         * @description 时间处理
         */
        dateFormat(dateTmp, fmtTmp) {
            if (!dateTmp) {
                return '';
            }
            let fmt = fmtTmp;
            let date = dateTmp;

            if (!fmt) {
                fmt = 'yyyy.MM.dd';
            }
            if (!(date instanceof Date)) {
                date = new Date(date);
            }
            let o = {
                'M+': date.getMonth() + 1, //月份
                'd+': date.getDate(), //日
                'h+': date.getHours() % 12 == 0 ? 12 : date.getHours() % 12, //小时
                'H+': date.getHours(), //小时
                'm+': date.getMinutes(), //分
                's+': date.getSeconds(), //秒
                'q+': Math.floor((date.getMonth() + 3) / 3), //季度
                S: date.getMilliseconds() //毫秒
            };
            let week = {
                '0': '日',
                '1': '一',
                '2': '二',
                '3': '三',
                '4': '四',
                '5': '五',
                '6': '六'
            };

            if (/(y+)/.test(fmt)) {
                fmt = fmt.replace(
                    RegExp.$1,
                    (date.getFullYear() + '').substr(4 - RegExp.$1.length)
                );
            }
            if (/(E+)/.test(fmt)) {
                fmt = fmt.replace(
                    RegExp.$1,
                    (RegExp.$1.length > 1 ? (RegExp.$1.length > 2 ? '星期' : '周') : '') + week[date.getDay() + '']
                );
            }
            for (var k in o) {
                if (new RegExp('(' + k + ')').test(fmt)) {
                    fmt = fmt.replace(
                        RegExp.$1,
                        RegExp.$1.length == 1 ? o[k] : ('00' + o[k]).substr(('' + o[k]).length)
                    );
                }
            }
            return fmt;
        },

        /**
         * @description: 预览图片
         */
        fnPrievimage (images, index) {
            if(images && Object.prototype.toString.call(images) == '[object String]') {
                this.$refs.preview.show([
                    images
                ]);
            } else if (images && Object.prototype.toString.call(images) == '[object Array]') {
                this.$refs.preview.show(images, index);
            } else {
                this.$notify({
                    title: '提示',
                    message: '图片类型错误',
                    type: 'warning',
                    duration: 2000
                });
            }
        },

        /**
         * 过滤函数
         */
        emptyFormatter(row, column, val) {
            if (!val) return '--';
            return val;
        }
    }
};
</script>

<style lang="less" scoped>
.goodAfterDetail {
    height: 100%;
    overflow: auto;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    .dialog-wrap {
        display: flex;
        margin-bottom: 24px;
        &-title {
            width: 80px;
            color: #666;
            font-size: 14px;
            white-space: nowrap;
        }
        &-type {
            color: #333;
            font-size: 14px;
        }
    }
    .center {
        align-items: center;
    }
    .dialog-footer {
        display: flex;
        justify-content: center;
        margin-bottom: 10px;
    }

    //售后详情
    .detail {
        display: flex;
        flex-direction: column;
        margin-bottom: 44px;
        &-title {
            height: 68px;
            line-height: 68px;
            width: 100%;
            box-sizing: border-box;
            border-bottom: 1px #EBEEF5 solid;
            padding-left: 24px;
            color: #333;
            font-size: 20px;
            font-weight: 500;
            margin-bottom: 32px;
        }
        &-wrap {
            display: flex;
            flex-direction: column;
            margin-left: 48px;
            margin-right: 24px;
            .wrap-title {
                display: flex;
                line-height: 16px;
                color: #333;
                font-size: 16px;
                font-weight: 500;
                margin-bottom: 32px;
                white-space: nowrap;
                border-bottom: 1px rgba(235, 238, 245, 1) solid;
                padding-bottom: 24px;
                margin-top: 12px;
                &-type {
                    color: #EE4E59;
                    margin-left: 7px;
                    .wrap-title-reson {
                        color: #999;
                        font-size: 14px;
                        margin-left: 16px;
                    }
                }
                .refundSuccess {
                    color: #4CD964;
                }
            }
            .detail-info {
                color: #333;
                font-size: 14px;
                font-weight: 500;
                margin-bottom: 12px;
            }
            .tableWrap {
                display: flex;
                align-items: center;
                &>img {
                    width: 82px;
                    height: 82px;
                    margin-right: 8px;
                }
                &-info {
                    display: flex;
                    height: 82px;
                    align-items: flex-start;
                    flex-direction: column;
                    &-title {
                       color: #333;
                       font-size: 14px;
                       font-weight: 500;
                       line-height: 20px;
                       margin-bottom: 12px;
                       overflow : hidden;
                        text-overflow: ellipsis;
                        display: -webkit-box;
                        -webkit-line-clamp: 2;
                        -webkit-box-orient: vertical;
                    }
                    &-spec {
                        color: #666;
                        white-space: nowrap;
                        font-size: 12px;
                        line-height: 16px;
                    }
                }
            }
        }
        .rufund-info {
            color: #333;
            font-size: 14px;
            font-weight: 500;
            margin: 32px 0 12px 0;
        }
        .refundSide {
            width: 100%;
            background: #FBFBFB;
            border-radius: 2px;
            box-sizing: border-box;
            border: 1px #EEEEEE solid;
            display: flex;
            flex-direction: column;
            .item {
                display: flex;
                align-items: flex-start;
                margin-top: 24px;
                margin-left: 74px;
                &-title {
                    color: #999999;
                    font-size: 14px;
                    margin-right: 12px;
                    white-space: nowrap;
                    line-height: 22px;
                }
                &-content {
                    color: #333;
                    font-size: 14px;
                    line-height: 22px;
                    width: calc(100% - 100px);
                    overflow: hidden;
                }
                .item-images {
                    max-width: 950px;
                    overflow: hidden;
                    img {
                        width: 146px;
                        height: 146px;
                        margin-right: 12px;
                        margin-bottom: 12px;
                    }
                    img:nth-child(6n) {
                        margin-right: 0px;
                    }
                }
            }
            .item-foot {
                height: 42px;
                width: 100%;
                box-sizing: border-box;
                border-top: 1px #EEEEEE solid;
                display: flex;
                align-items: center;
                padding-left: 24px;
                margin-top: 12px;
                .item-detail {
                    color: #333;
                    font-size: 14px;
                    font-weight: 500;
                    display: flex;
                    align-items: center;
                    .item-check {
                        color: #20A0FF;
                        font-size: 14px;
                        margin-left: 20px;
                        font-weight: 500;
                        cursor: pointer;
                        white-space: nowrap;
                    }
                }
            }
        }
        .dialog-foot {
            display: flex;
            align-items: center;
            margin-top: 32px;
        }

        //状态展示
        .view {
            box-sizing: border-box;
            margin-bottom: 24px;
        }

        //换货
        .__goods {
            width: 100%;
            background: rgba(251, 251, 251, 1);
            border-radius: 2px;
            box-sizing: border-box;
            border: 1px #EEEEEE solid;
            padding: 32px 24px 0 24px;
            .__item {
                width: 100%;
                display: flex;
                flex-wrap: wrap;
                .__item_title {
                    width: calc(100% / 3.2);
                    color: rgba(136, 136, 136, 1);
                    font-size: 14px;
                    line-height: 14px;
                    margin-bottom: 24px;
                    display: flex;
                    align-items: center;
                    white-space: nowrap;
                    .__item_content {
                        color: rgba(51, 51, 51, 1);
                        font-size: 14px;
                        line-height: 20px;
                        margin-left: 4px;
                        .item-detail {
                            color: #333;
                            font-size: 14px;
                            font-weight: 500;
                            display: flex;
                            align-items: center;
                            .item-check {
                                color: #20A0FF;
                                font-size: 14px;
                                margin-left: 20px;
                                font-weight: 500;
                                cursor: pointer;
                            }
                        }
                    }
                }
            }
            .__goods_item {
                display: flex;
                align-items: flex-start;
                margin-bottom: 18px;
                .__goods_item_title {
                    color: rgba(153, 153, 153, 1);
                    font-size: 14px;
                    margin-right: 12px;
                }
                .__goods_item_remark {
                    width: 520px;
                    color: rgba(51, 51, 51, 1);
                    font-size: 14px;
                    line-height: 20px;
                    margin-top: -4px;
                }
                .item-images {
                    max-width: 950px;
                    overflow: hidden;
                    img {
                        width: 146px;
                        height: 146px;
                        margin-right: 12px;
                        margin-bottom: 12px;
                    }
                    img:nth-child(6n) {
                        margin-right: 0px;
                    }
                }
            }
        }
    }
}
</style>

<style lang="less">
.goodAfterDetail {
    .el-table__body-wrapper .el-table__body .el-table__row td {
        border-right: none;
    }
    .el-table__header-wrapper .el-table__header .has-gutter tr th {
        border-right: none;
    }
    .el-table .el-table_1_column_6  .cell {
        position: relative;
    }
    .el-range-editor--small .el-range-separator{
        padding: 0 1px !important;
    }
    .el-table__header-wrapper .el-table__header .has-gutter tr th {
        background: #F2F2F2;
        color: #333333;
        font-weight: 500;
    }
    .el-dialog__header {
        padding-top: 10px;
        box-shadow:0px 1px 0px 0px rgba(233,233,233,1);
        display: flex;
        align-items: center;
        background: #FAFAFA;
        border-radius: 4px 4px 0 0;
        .el-dialog__title {
            font-weight: 500;
            color: #333;
            font-size: 14px;
        }
        .el-icon-close:before {
            color: rgb(194,194,194);
            font-size: 17px;
            font-weight: bold;
        }
        .el-dialog__headerbtn {
            top: 14px;
        }
    }
    .el-dialog__body {
        padding: 30px 60px;
    }
    .el-textarea__inner {
        resize: none;
        background: #FBFBFB;
    }
    .dialog-wrap {
        .el-radio__label {
            padding-left: 5px;
        }
        .el-radio {
            margin-right: 16px;
        }
    }
    .el-step .iconfont {
        font-size: 10px;
    }
}
.el-dialog__wrapper {
    overflow: hidden;
}
</style>